<template>
  <div class="content_body">
    <!-- 头部 -->
    <div style="margin: 10px 0 10px 10px;">
      <el-button-group>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd()">新增角色</el-button>
        <el-button type="primary" icon="el-icon-search" @click="load()">查询角色</el-button>
      </el-button-group>
    </div>
    <!-- 表格 -->
    <div style="margin: 0 10px 0 10px;">
      <el-table
        ref="multipleTable"
        :data="beanList"
        tooltip-effect="dark"
        style="width: 100%"
        border>
        <el-table-column prop="name" label="角色名称"  min-width="15%" header-align="center"></el-table-column>
        <el-table-column prop="menu_name" label="菜单名称" min-width="10%" header-align="center"></el-table-column>
        <el-table-column prop="url" label="菜单地址" min-width="20%" header-align="center"></el-table-column>
        <el-table-column prop="note" label="备注" min-width="10%" align="center"> </el-table-column>
        <el-table-column prop="create_by_company_name" label="创建机构" min-width="15%" align="center"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="15%" align="center"></el-table-column>
        <el-table-column label="操作" min-width="30%" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleAuth(scope.$index)">权限</el-button>
            <el-button size="mini" type="primary" @click="handleUpdate(scope.$index)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-body">
        <div class="block">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="pageInfo.pageNo"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="pageInfo.pageSize"
            layout="sizes, prev, pager, next"
            :total="pageInfo.totalRecord">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增模态框 -->
    <el-dialog title="角色信息" :visible.sync="is_open_add_flag" :modal-append-to-body="false" width="60%">
        <role-info :info.sync="info" :menuList="menuList" v-if="is_open_add_flag"></role-info>
        <div slot="footer" class="dialog-footer">
            <el-button @click="is_open_add_flag = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 更新模态框 -->
    <el-dialog title="角色信息" :visible.sync="is_open_update_flag" :modal-append-to-body="false" width="60%">
        <role-info :info.sync="info" :menuList="menuList" v-if="is_open_update_flag"></role-info>
        <div slot="footer" class="dialog-footer">
            <el-button @click="is_open_update_flag = false">取 消</el-button>
            <el-button type="primary" @click="update()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 配置权限 -->
    <el-dialog title="权限信息" :visible.sync="is_open_auth_flag" :modal-append-to-body="false" width="80%">
        <role-auth :info="info" :visible.sync="is_open_auth_flag" v-if="is_open_auth_flag"></role-auth>
    </el-dialog>
  </div>
</template>
<script>
import RoleInfo from "./roleInfo"; //表单
import RoleAuth from "./roleAuth"; //表单
export default {
  name: "role",
  components: { RoleInfo, RoleAuth },
  data: function() {
    return {
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      is_open_add_flag: false, //新增模态框
      is_open_update_flag: false, //编辑模态框
      is_open_auth_flag: false, //权限信息模态框
      bean: {},
      info: {}, //由于bean是 关键字还是啥 反正不好使 加个info 来代替bean 向子组件传值
      beanList: [],
      menuList: []
    };
  },
  mounted: function() {
    this.load();
    this.ajax({
      url: this.API.menu.allList,
      data: {},
      success: resultData => {
        this.menuList = resultData.data;
      }
    });
  },
  watch: {
    bean: function(newValue, oldValue) {
      this.info = this.bean;
    },
    info: function(newValue, oldValue) {
      this.bean = this.info;
    }
  },
  methods: {
    //加载数据
    load: function() {
      this.ajax({
        url: this.API.role.page,
        data: {},
        success: resultData => {
          this.beanList = resultData.data.results;
          this.pageInfo.totalRecord = resultData.data.totalRecord;
        }
      });
    },
    handleAuth: function(index) {
      this.bean = this.beanList[index];
      this.is_open_auth_flag = true;
    },
    handleAdd: function(index) {
      this.bean = {};
      this.is_open_add_flag = true;
    },
    add: function() {
      this.ajax({
        url: this.API.role.save,
        data: this.bean,
        success: resultData => {
          this.$message.success("操作成功");
          this.is_open_add_flag = false;
          this.load();
        }
      });
    },
    handleDelete: function(index) {
      this.bean = this.beanList[index];
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajax({
            url: this.API.role.delete,
            data: this.bean,
            success: resultData => {
              if (resultData.status === 0) {
                this.$message.success("删除成功!");
                this.load();
              } else {
                this.$message({
                  showClose: true,
                  message: resultData.msg,
                  type: "error"
                });
              }
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    handleUpdate: function(index) {
      this.bean = this.beanList[index];
      this.is_open_update_flag = true;
    },
    update: function() {
      this.ajax({
        url: this.API.role.update,
        data: this.bean,
        success: resultData => {
          this.$message.success("操作成功");
          this.is_open_update_flag = false;
          this.load();
        }
      });
    },
    sizeChange: function(val) {
      this.pageInfo.pageSize = val;
      this.load();
    },
    currentChange: function(val) {
      this.pageInfo.pageNo = val;
      this.load();
    }
  }
};
</script>
